import { useEffect } from "react";
import { useDispatch, useSelector } from "umi";
import Count from "./components/count";
import Table from "./components/table";
import { cn } from "@/utils/twMerge";
import PieComponent from "./components/PieComponent";

const ID: React.FC = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({
      type: "dashboard/getDashboardData",
      payload: {},
    });
  }, []);
  const dashboard = useSelector((state: any) => state.dashboard.dashboard);
  // console.log(count);
  return (
    <div className="w-full h-full mb-10 ">
      <div className="flex flex-wrap gap-3 mb-3">
        {dashboard?.count &&
          dashboard?.count.map((c: any) => (
            <Count
              key={c.title}
              count={c.value}
              title={c.title}
              className={cn(c.width == "100%" ? "w-full" : "flex-1")}
            />
          ))}
      </div>
      <div className="mb-3">
        <PieComponent></PieComponent>
      </div>
      <div>
        <Table data={dashboard?.table}></Table>
      </div>
      <div className="h-10"></div>
    </div>
  );
};

export default ID;
